<template>
  <div>
    <!-- 底部导航栏 -->
    <!-- 导航栏添加了很多东西 -->
    <!-- 导航栏添加了很多东西 -->
    <!-- 导航栏添加了很多东西 -->
    <!-- 导航栏添加了很多东西 -->
    <!-- 导航栏添加了很多东西 -->
    <!-- 导航栏添加了很多东西 -->
    <!-- 导航栏添加了很多东西 -->
    <tabber></tabber>

    <!-- 头部header -->
    <van-nav-bar title="影院" @click-left="handleLeft()" @click-right="handleRight()">
      <template #left>
        <div class="cityOption">
          <span>{{ cityName }}</span>
          <i class="iconfont icon-arrow-down-bold"></i>
        </div>
      </template>
      <template #right>
        <i class="iconfont icon-sousuo"></i>
      </template>
    </van-nav-bar>

    <!-- 影院列表标签 -->
    <van-dropdown-menu active-color="#ff5f16">

      <van-dropdown-item title="全城" v-model="value1">
        <div class="tagCity">
          <!-- color="#D2D6DC" -->
          <van-tag color="#D2D6DC" size="large" plain v-for="(item, index) in tagCity" :key="index" @click="changeTagCity(index)">
            <div>{{ item }}</div>
          </van-tag>
        </div>
      </van-dropdown-item>

      <!-- app订票 -->
      <van-dropdown-item v-model="value2" :options="booking" />

      <!-- 去过那里 -->
      <van-dropdown-item v-model="value3" :options="move" />

    </van-dropdown-menu>

    <!-- 影院列表 -->
    <div class="cinema" :style="{height: height}">
      <ul>
        <li v-for="data in vuex_cinemaList" :key="data.cinemaId">
          <!-- 影院和地址 -->
          <div class="address">
            <span>{{ data.name }}</span>
            <span>{{ data.address }}</span>
          </div>
          <!-- 价格和距离 -->
          <div class="cinema_price">
            <div>
              <span>￥{{ data.lowPrice/100 }}起</span>
            </div>
            <span class="cinema_gps">距离未知</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import tabber from '@/components/Tabber.vue'
import BetterScroll from 'better-scroll'
import Vue from 'vue'
import { NavBar, DropdownMenu, DropdownItem, Cell, Tag } from 'vant'
import { mapActions, mapMutations, mapState } from 'vuex'

Vue.use(NavBar).use(DropdownMenu).use(DropdownItem).use(Cell).use(Tag)

export default {
  // 把tabber注册成局部组件
  components: {
    tabber
  },
  data () {
    return {
      // cinemaList: [],
      // 设置视口的高度
      height: 0,
      value1: 0,
      value2: 'a',
      value3: 'a',
      booking: [
        { text: 'APP订票', value: 'a' },
        { text: '前台兑换', value: 'b' }
      ],
      move: [
        { text: '最近去过', value: 'a' },
        { text: '离我最近', value: 'b' }
      ],
      tagCity: ['全城', '福田区', '南山区', '龙华区', '龙岗区', '宝安区', '罗湖区', '光明区', '盐田区', '坪山区', '大鹏区']
    }
  },
  computed: {
    ...mapState('CityModule', ['cityId', 'cityName']),
    ...mapState('CinemaModule', ['vuex_cinemaList'])
  },
  methods: {
    ...mapMutations('CinemaModule', ['clear_vuex_list']),
    ...mapActions('CinemaModule', ['getCinemaList']),
    handleLeft () {
      // 清空vuex里面的 vuex_cinemaList: [] 数据
      // 但是不允许直接修改状态，要监听修改的过程，把方法提交到mutations里面，使用commit方法提交
      // 直接在vuex里面，新创建一个清空数组的方法 clear_vuex_list()
      this.clear_vuex_list()

      this.$router.push('/city')
    },
    handleRight () {
      this.$router.push('/cinema/search')
    },
    changeTagCity (id) {
      this.value1 = id
    },
    newbtterScorll () {
      this.$nextTick(() => {
        new BetterScroll('.cinema', {
          scrollbar: true,
          disableTouch: false
        })
      })
    }
  },
  mounted () {
    // 获取可视窗口的高度
    this.height = document.documentElement.clientHeight - 144 + 'px'

    // 第一次的获取的时候，就走vuex的异步流程
    if (this.vuex_cinemaList.length === 0) {
      // vuex的异步流程
      // dispatch，http异步请求，所以是一个promise对象，我们在vuex里面，直接返回即可，这里就可以直接then方法调用
      // this.$store.state.cityId 这里 拿到的是 vuex里面的cityId
      this.getCinemaList(this.cityId).then(res => {
        // 有个问题，我们的BetterScroll不知道在哪里初始化。
        // 巧的是，dispatch是一个异步。 在http请求，返回的是一个promise对象，我们在then里面可以直接低啊用$nextTick方法即可
        this.newbtterScorll()
      })
    } else {
      // 有数据了，直接获取即可
      console.log('缓存')
      this.newbtterScorll()
    }
  }
}
</script>

<style scoped>
  ul li {
    height: 44px;
    border-bottom: 1px solid #ededed;
    font-size: 12px;
    padding: 15px;
    display: flex;
  }
  /* 影院地址 */
  .address {
    height: 45px;
    width: calc(100% - 70px);
    float: left;
  }
  .address span {
    display: block;
  }
  .address span:first-child {
    font-size: 15px;
    color: #191a1b;
  }
  .address span:last-child {
    color: #797d82;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 价格和距离 */
  .cinema_price {
    float: right;
    height: 45px;
    width: 70px;
    text-align: center;
  }
  /* 价格的样式 */
  .cinema_price div span:first-child {
    font-size: 15px;
    color: #ff5f16;
  }

  .cinema_price .cinema_gps {
    font-weight: 400;
    display: block;
    margin-top: 5px;
    font-size: 11px;
    color: #797d82;
    text-align: center;
  }
  /* 城市选项 */
  .cityOption {
    font-size: 13px;
  }
  .cityOption i {
    font-size: 9px;
  }
  /* 搜索 */
  .icon-sousuo {
    font-size: 18px;
    color: #2c3e50;
  }
</style>

<style lang="scss" scoped>
  .cinema {
    height: 300px;
    overflow: hidden;
    position: relative;
  }
  .tagCity {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    height: 145px;
  }
  .tagCity .van-tag {
    display: block;
    height: 26px;
    width: 80px;
    text-align: center;
    line-height: 26px;
    margin: 7px 3px;
  }
  .tagCity .van-tag div {
    color: #797d82;
  }
  // .changeTagCity {
  //   color: #ff5f16;
  // }
</style>
